<template>
 <!-- 左边第四个 面积图 -->
  <div class="wrapper">
    <div id="myChart4"></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      options4: {
        // 修改图表的大小
        grid: {
          left: "0%",
          top: "10px",
          right: "5%",
          bottom: "7%",
          containLabel: true, // 可以理解为 y轴在 图表里面
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            areaStyle: {},
          },
        ],
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    drawLine() {
      let myChart4 = this.$echarts.init(document.getElementById("myChart4"));
      myChart4.setOption(this.options4);
      window.addEventListener("resize", function () {
        myChart4.resize();
      });
    },
  },
  created() {},
  mounted() {
    this.drawLine();
  },
};
</script>
<style lang="scss" scoped>
#myChart4 {
  width: 98%;
  height: 83%;
  //   background-color: pink;
}
</style>